<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../plugins/layui/css/layui.css" />
		<script src="../plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!--  搜索 开始-->
		<div class="layui-form-item">
			<label class="layui-form-label">用户ID:</label>
			<div class="layui-input-inline">
				<input type="text" name="title" required lay-verify="required" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
			</div>

			<label class="layui-form-label">用户名:</label>
			<div class="layui-input-inline">
				<input type="text" name="title" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">邮箱:</label>
			<div class="layui-input-inline">
				<input type="text" name="title" required lay-verify="required" placeholder="请输入用户邮箱" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-label">性别:</label>
			<div class="layui-input-inline">
				<select name="city" lay-verify="" class="layui-input">
					<option value="">--请选择性别--</option>
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
			</div>
			<button class="layui-btn layui-btn-normal">
				 <i class="layui-icon">&#xe615;</i>
			</button>

		</div>
		<!--数据表格   添加按钮   开始-->

		<div>
			<table class="layui-hide" id="test" lay-filter="test"></table>

			<script type="text/html" id="toolbarDemo">
				<div class="layui-btn-container">
					<button class="layui-btn layui-btn-sm" lay-event="">
						<i class="layui-icon">&#xe654;</i>
					</button>
					<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="">
						<i class="layui-icon">&#x1006;</i>
					</button>
				</div>
			</script>

			<script type="text/html" id="barDemo">
				<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			</script>

			<script>
				layui.use('table', function() {
					var table = layui.table;

					table.render({
						elem: '#test',
						cellMinWidth: 80,
						url: '../dataset/tab3.json/',
						page: true,
						id: 'test',
						response: {
							statusName: 'sss'
						},
						title: '用户数据表',
						cols: [
							[{
								type: 'checkbox',
								fixed: 'left'
							}, {
								field: 'id',
								title: 'ID',
								width: 80,
								fixed: 'left',
								unresize: true,
								sort: true
							}, {
								field: 'username',
								title: '用户名',
								width: 120,
								edit: 'text'
							}, {
								field: 'nickname',
								title: '昵称',
								width: 120,
								edit: 'text',
							}, {
								field: 'img',
								title: '头像',
								width: 80,
								edit: 'text',
							}, {
								field: 'name',
								title: '真实姓名',
								width: 120,
								edit: 'text',
							}, {
								field: 'phone',
								title: '手机号',
								width: 150,
								edit: 'text',
							}, {
								field: 'email',
								title: '邮箱',
								width: 180,
								edit: 'text',
							}, {
								field: 'sex',
								title: '性别',
								width: 80,
								edit: 'text',
								sort: true
							}, {
								field: 'regtime',
								title: '注册时间',
								unresize: true,
								sort: true,
								width: 150,
								edit: 'text',
							}, {
								field: 'level',
								title: '会员等级',
								width: 100,
								edit: 'text',
							}, {
								field: 'interest',
								title: '感兴趣的',
								width: 300,
								edit: 'text',
							}, {
								fixed: 'right',
								title: '操作',
								toolbar: '#barDemo',
								width: 150
							}]
						],
						page: true
					});

					//头工具栏事件
					table.on('toolbar(test)', function(obj) {
						var checkStatus = table.checkStatus(obj.config.id);
						switch(obj.event) {
							case 'getCheckData':
								var data = checkStatus.data;
								layer.alert(JSON.stringify(data));
								break;
							case 'getCheckLength':
								var data = checkStatus.data;
								layer.msg('选中了：' + data.length + ' 个');
								break;
							case 'isAll':
								layer.msg(checkStatus.isAll ? '全选' : '未全选');
								break;
						};
					});

					//监听行工具事件
					table.on('tool(test)', function(obj) {
						var data = obj.data;
						//console.log(obj)
						if(obj.event === 'del') {
							layer.confirm('真的删除行么', function(index) {
								obj.del();
								layer.close(index);
							});
						} else if(obj.event === 'edit') {
							layer.open({
								title:'编辑用户',
								type:2,
								content: 'form.html',
								area:['500px','500px']
								
							})
						}
					});
				});
			</script>

		</div>

	</body>

</html>